<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<!-- 文章内容 -->
<section
        th:fragment="article_info(article, author, other, payUsers)"
        class="article-info-wrap com-2-panel col-2-article J-articlePanel"
>
    <span class="com-2-mark-triangle article-mark">
      <span class="mark-cnt">原创</span>
    </span>
  <div
          id="postsTitle"
          class="article-info-title"
          th:data-id="${article.articleId}"
          th:text="${article.title}"
  >
    标题
  </div>
  <div>
    <div class="detail-content-title-other-wrap relative" th:if="${author != null}">
      <img th:src="${author.photo}" class="detail-content-title-other-img" />
      <a
              th:href="${'/user/' + author.userId}"
              th:text="${author.userName}"
              class="detail-content-title-other-name"
      >
        作者
      </a>

      <span
              th:text="${T(com.github.paicoding.forum.core.util.DateUtil).time2day(article.createTime)}"
              class="detail-content-title-other-time"
      >
          更新时间
        </span>
      <span th:text="'阅读 ' + ${article.count.readCount}">520</span>
      <!-- 付费阅读 -->
      <span style="margin-left:4px" th:if="${article.readType != null && article.readType == 4}">
        <svg class="icon" style="width: 2.2em;height: 2.2em;vertical-align: middle;fill: red;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10666"><path d="M662.153812 450.997648h63.83998v-20.825305h-58.377572c-1.367137 7.851828-3.072989 13.656021-5.462408 20.825305z m143.384641-53.940517H745.45196v17.752316h60.08547v-17.752316z m-220.539882 53.940517h56.329936c2.732228-6.144954 4.779863-12.631692 6.828523-20.825305h-55.988152l-7.170307 20.825305z m85.007069-36.188201h55.988152v-17.752316H671.712515c-0.682545 7.511067-1.366114 12.632715-1.706875 17.752316zM0.021489 256.010745v511.977487h1023.957022V256.010745H0.021489z m249.462609 411.770228c1.36509-12.290931 2.047636-23.556509 2.047635-41.307802V512.447185c0-15.021112 0.341784-25.604144 1.365091-41.307802-13.995759 23.556509-21.847587 34.138518-38.234813 52.575426-1.025353-1.706875-2.049682-3.074012-2.390443-3.756557-4.437056-6.828522-4.437056-7.169283-12.630669-15.021111 30.381961-32.090882 49.843198-61.449537 68.618821-104.124476 8.876158-20.140713 13.31526-33.115212 15.021112-43.697221l24.579814 7.851828c-2.38942 4.096295-4.096295 8.193613-8.534373 19.458168-4.77884 11.949146-15.703657 35.505655-25.944906 54.963822v187.766454c0 15.703657 0.682545 28.67611 1.706875 40.625257h-25.604144z m65.546855-164.55173l17.752316-12.288885c24.921599 27.311019 37.895075 44.721551 57.69605 77.153195l-19.11843 14.68035c-17.411555-32.773428-33.797757-55.305607-56.329936-79.54466z m192.20351-41.307802c-10.583033-1.02433-21.50785-1.36509-32.431643-1.36509h-16.727987v170.694637c0 22.532179-7.169283 27.994588-37.553291 27.994587-13.995759 0-25.944905-0.682545-41.649585-2.049682-1.36509-9.558703-2.730181-14.678304-6.486738-23.212678 20.825304 3.071965 30.725792 4.096295 46.771233 4.096295 13.997805 0 17.069771-1.36509 17.069771-8.876158V460.556351H329.028759c-14.338566 0-27.653827 0.682545-36.529985 2.047635v-23.897269c8.876158 1.36509 21.50785 2.047636 35.505655 2.047636h108.219747v-39.260166c0-16.045441-0.682545-30.0412-2.38942-39.942711h26.28669c-1.36509 11.608386-2.047636 23.214724-2.047636 39.942711v39.260166h16.727986c13.656021 0 23.556509-0.682545 32.431644-2.047636v23.214724z m199.299115 97.295954c-1.706875 29.701462-7.169283 49.15963-18.434861 61.792344-13.656021 16.045441-35.503609 27.65178-67.594491 36.186154-15.362896 3.756557-33.116235 6.828522-62.134129 9.901511-2.730181-8.193613-4.779863-12.631692-10.92584-21.167089 41.309848-0.341784 81.252559-8.193613 103.782691-20.482497 25.264407-13.656021 33.79878-31.408337 33.798781-70.668502 0-5.462408 0-7.511067-0.682546-13.315261h23.556509c-0.683569 6.488785-0.683569 6.488785-1.366114 17.75334zM838.311881 669.828608c-55.305607-22.87294-73.740468-29.701462-130.069381-47.111994l9.216919-17.752316 66.571184 22.87294c9.899464 3.412726 9.899464 3.412726 35.505655 12.630669 9.899464 3.756557 13.653975 5.121648 26.627451 9.901511l-7.851828 19.45919z m4.437055-201.420429c-2.38942 15.362896-4.77884 23.556509-7.509021 26.627451-3.756557 4.439102-9.218966 6.144954-17.412578 6.144954-7.851828 0-13.313214-0.682545-23.214724-2.730181-1.02433-9.901511-1.36509-11.608386-3.754511-18.095124 10.241248 3.414773 15.703657 4.439102 21.849634 4.439102 7.511067 0 8.193613-0.682545 10.583033-18.093076H745.45196v12.971429c0 9.216919 0.341784 13.997805 1.706874 20.142759h-22.871917c1.36509-5.804193 1.706875-10.92584 1.706875-19.801998v-13.313214h-72.033593c-11.266601 17.410532-26.971281 30.0412-50.526767 40.967041 10.92584 0.341784 11.949146 0.341784 23.214725 0.341784h138.605801c16.386202 0 29.016871-0.341784 38.57762-1.365091-1.025353 7.511067-1.367137 18.775622-1.367137 33.455973v35.845393c0 19.801998 0.341784 29.701462 1.707898 37.895075h-26.288736c1.707898-11.948123 2.390443-21.50785 2.390443-37.895075v-50.183959H611.628068v50.183959c0 11.949146 1.02433 30.384008 2.047636 37.895075h-26.288736c1.707898-9.899464 2.390443-22.532179 2.390443-37.895075v-33.455973c0-17.410532 0-21.167089-0.682545-29.018917-12.631692 5.121648-18.777669 7.511067-36.529985 12.631692-3.071965-7.511067-6.486738-12.973476-11.265578-17.752316 48.136324-10.241248 73.398684-21.849634 90.12667-41.649586h-44.722574c-11.948123 0-22.189372 0.341784-30.381961 1.02433 9.558703-18.435884 15.020088-34.82311 18.775622-53.940517 7.511067 0.682545 15.703657 1.02433 31.066553 1.02433h44.379767c0.682545-5.119601 1.367137-13.31526 1.367137-17.752316h-59.402925c-13.656021 0-23.556509 0.341784-33.455973 1.706875v-20.140713c8.534374 1.36509 16.386202 1.706875 33.455973 1.706875h60.08547c0-10.583033-0.340761-13.997805-1.367137-23.214725h22.532179c-0.682545 5.121648-1.02433 8.193613-1.36509 23.214725h53.598732v-3.414773c0-8.193613-0.341784-12.971429-1.706875-20.140713h22.871917c-1.36509 7.169283-1.706875 11.948123-1.706875 20.824282v2.732227h49.15963c15.703657 0 24.922622-0.341784 32.431643-1.706875-1.02433 7.851828-1.36509 12.630668-1.36509 22.189372v11.266601c0 11.265578 0 13.656021 1.024329 19.117407-9.899464-0.682545-19.458167-1.02433-32.431643-1.02433H745.45196v20.825305h67.596537c19.458167 0 24.921599 0 33.115212-1.02433-1.02433 4.096295-1.706875 8.876158-3.414773 18.434861z" fill="" p-id="10667"></path></svg>
      </span>

      <span th:if="${article.status != 1}">
            <span th:text="${article.status == 0 ? '(草稿)' : '(审核中)'}" style="padding-left: 1em; color: red"></span>
        </span>
      <div
              th:if="${global.isLogin && article.author == global.user.userId}"
              class="detail-content-title-edit"
      >
        <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
          <symbol id="edit-svg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path class="cls-1" d="M9 1H3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7h-1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V3a1 1 0 011-1h6V1z" />
            <path class="cls-1" d="M12 2.41L13.59 4l-6 6H6V8.41l6-6M12 1L5 8v3h3l7-7-3-3z" />
          </symbol>
        </svg>

        <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
          <symbol id="delete-svg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path class="cls-1" d="M13 3h-2V1H5v2H2v1h1v9a2 2 0 002 2h6a2 2 0 002-2V4h1V3zM6 2h4v1H6zm5 12H5a1 1 0 01-1-1V4h8v9a1 1 0 01-1 1z" />
            <path class="cls-1" d="M6 6h1v6H6zm3 0h1v6H9z" />
          </symbol>
        </svg>

        <a th:href="${'/article/edit?articleId=' + article.articleId}" class="com-opt-link link-edit">
          <svg class="com-i-edit">
            <use xlink:href="#edit-svg"></use>
          </svg>编辑
        </a>

        <a href="javascript:;" data-target="#deleteModal" data-toggle="modal" class="com-opt-link link-delete ml-3">
          <svg class="com-i-delete">
            <use xlink:href="#delete-svg"></use>
          </svg>删除
        </a>
      </div>
    </div>
  </div>

  <div id="articleContent" class="article-content" th:utext="${article.content}">
  </div>

  <!-- 左右切换 -->
  <div class="article-change direction" th:if="${other.flip != null}">
    <a class="step-btn--prev"
       th:href="${other.flip.prevHref}"
       th:if="${other.flip.prevShow}"
    >
      <div class="article-change-item">
        <svg
                t="1670064682276"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9458"
                width="32"
                height="32"
        >
          <path
                  d="M671.968176 911.99957c-12.287381 0-24.576482-4.67206-33.951566-14.047144L286.048434 545.984249c-18.751888-18.719204-18.751888-49.12028 0-67.872168L638.016611 126.111222c18.751888-18.751888 49.12028-18.751888 67.872168 0 18.751888 18.719204 18.751888 49.12028 0 67.872168l-318.016611 318.047574L705.888778 830.047574c18.751888 18.751888 18.751888 49.12028 0 67.872168C696.544658 907.32751 684.255557 911.99957 671.968176 911.99957z"
                  p-id="9459"
                  fill="#ffffff"
          ></path>
        </svg>
      </div>
    </a>
    <a class="step-btn--next"
       th:href="${other.flip.nextHref}"
       th:if="${other.flip.nextShow}"
    >
      <div class="article-change-item">
        <svg
                t="1670064662589"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8352"
                width="32"
                height="32"
        >
          <path
                  d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z"
                  p-id="8353"
                  fill="#ffffff"
          ></path>
        </svg>
      </div>
    </a>
  </div>

  <div th:if="${other.readType == 1 && !global.isLogin}">
    <div class="needlock">
      <a class="btn-readmore no-login underline" data-target="#loginModal" data-toggle="modal">
        <span>登录之后即可阅读全文</span>
      </a>
    </div>
  </div>

  <div th:if="${other.readType == 4 && article.canRead != null && article.canRead == false}">
    <div class="needlock" style="text-align: center">
      <a class="btn-readmore no-login underline" data-target="#payInfoModal" data-toggle="modal">
        <button type="button" class="c-btn" onclick="showPayModal()" th:if="${T(java.util.Objects).equals(article.payWay, 'email')}">打赏之后立即解锁阅读全文🔐</button>
        <button type="button" class="c-btn" onclick="showPayModal()" th:if="${!T(java.util.Objects).equals(article.payWay, 'email') && article.payAmount != null}">支付<span style="font-size: 1.4em;color: #ffeb3b;padding:0 0.2em" th:text="'￥' + ${article.payAmount}">元</span>立即解锁阅读全文🔐</button>
      </a>
    </div>
  </div>

  <div th:if="${other.readType == 4}" class="container text-right">
    <button class="c-btn c-btn-hole" style="border-radius: 1.5em;" th:text="'去打赏'" th:if="${payUsers == null}" onclick="showPayModal()">15人已赏</button>
    <button class="c-btn c-btn-hole" style="border-radius: 1.5em;" th:text="${payUsers.size()} + '人已赏'" th:if="${payUsers != null}" onclick="showPayUserInfo()">15人已赏</button>
  </div>

  <div th:if="${other.readType == 3 && !(global.user != null && global.user.starStatus.code == 2)}">
    <div class="needlock">
      <a class="btn-readmore no-login underline" href="#" target="_blank" data-target="#registerModal" data-toggle="modal">
        <H2>已加入二哥编程星球，即刻绑定星球编号解锁🔐</H2>
      </a>
    </div>
  </div>

  <!-- 打赏支付  -->
  <div class="modal fade"
       id="payModel"
       data-backdrop="static"
       data-keyboard="false"
       tabindex="-1"
       role="dialog"
       aria-labelledby="deleteModalDropLabel"
       aria-hidden="true"
       th:if="${other.readType == 4 && article.canRead != null && article.canRead == false}"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <a href="https://t.zsxq.com/11YwgyGmC" target="_blank">
            <h5 class="modal-title" id="payInfoModel">支付解锁阅读全文</h5>
          </a>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div th:replace="views/user/pay/payShow :: user_pay(${author.payQrCodes}, ${article})"></div>
        </div>
        <div class="modal-footer">
          <a href="#" data-target="#payInfoModal" data-toggle="modal" type="button" class="btn btn-primary"
             data-dismiss="modal" onclick="hasPaying()">
            已完成打赏
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- 打赏列表 -->
  <div class="modal fade"
       id="payUserModel"
       data-backdrop="static"
       data-keyboard="false"
       tabindex="-1"
       role="dialog"
       aria-labelledby="deleteModalDropLabel"
       aria-hidden="true"
       th:if="${other.readType == 4}"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <a href="https://t.zsxq.com/11YwgyGmC" target="_blank">
            <h5 class="modal-title">打赏用户列表</h5>
          </a>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="praise-photos">
            <div class="approval-box" id="praiseUsers">
              <a class="g-user-popover approval-img" th:href="'/user/' + ${item.userId}"
                 th:each="item: ${payUsers}">
                <img th:src="${item.avatar}" style="width: 120px;padding: 10px">
              </a>
              <span th:if="${payUsers == null || payUsers.size() == 0}"> 暂无打赏用户哦，快来做第一个慧眼识珠的人吧~ </span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="#" data-target="#payInfoModal" data-toggle="modal" type="button" class="btn btn-primary"
             data-dismiss="modal" onclick="redirctPayModal()" id="goPayBtn"
             th:text="${(other.readType == 4 && article.canRead != null && article.canRead == false) ? '去打赏' : '已打赏'}">
            去打赏
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- 星球详情  -->
  <div class="modal fade"
       id="starModel"
       data-backdrop="static"
       data-keyboard="false"
       tabindex="-1"
       role="dialog"
       aria-labelledby="deleteModalDropLabel"
       aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <a href="https://t.zsxq.com/11YwgyGmC" target="_blank">
            <h5 class="modal-title" id="startModel">该文档仅「二哥编程星球」的VIP用户可见</h5>
          </a>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div  class="content join-star">
            <p >二哥的编程星球内容包括：</p>
            <p ><span class="category">1. 付费文档</span>: 技术派、MYDB 等项目配套的 120+篇教程查看权限</p>
            <p ><span class="category">2. 面试指南</span>: 校招、社招的 40 万+字面试求职攻略</p>
            <p ><span class="category">3. 智能助手</span>: 无限期使用派聪明 AI 助手，已对接讯飞星火和 ChatGPT双通道，不用花 1 分钱</p>
            <p ><span class="category">4. 专属问答</span>: 向二哥 1v1 发起提问，内容不限于 offer 选择、学习路线、职业规划等</p>
            <p ><span class="category">5. 简历修改</span>: 提供简历修改服务，附赠星球 100+优质简历模板可供参考</p>
            <p ><span class="category">6. 学习环境</span>: 打造一个沉浸式的学习环境，有一种高考冲刺、大学考研的氛围</p> <br >
            <img  src="https://cdn.tobebetterjavaer.com/paicoding/image-fdae281151294c18a14563846393465d.jpg" alt="二哥的星球" style="cursor: zoom-in;width: 100%"> <br >
            <p >》步骤①：微信扫描上方二维码，点击「加入知识星球」按钮</p>
            <p >》步骤②：访问星球置顶帖球友必看：
              <a class="underline" href="https://t.zsxq.com/11rEo9Pdu" target="_blank">https://t.zsxq.com/11rEo9Pdu</a>，获取项目配套文档的语雀访问地址和密码</p>
          </div>
        </div>
        <div class="modal-footer">
          <a href="#" data-target="#registerModal" data-toggle="modal" type="button" class="btn btn-primary" data-dismiss="modal">
            已加入星球，绑定星球编号
          </a>
        </div>
      </div>
    </div>
  </div>


  <!-- 删除文章再次确认 Modal -->
  <div class="modal fade"
       id="deleteModal"
       data-backdrop="static"
       data-keyboard="false"
       tabindex="-1"
       role="dialog"
       aria-labelledby="deleteModalDropLabel"
       aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteModalDropLabel">删除提醒</h5>
          <button type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p th:text="${'确定删除《' + article.title + '》吗'}">确定删除吗？</p>
        </div>
        <div class="modal-footer">
          <button id="deleteBtn" type="button" class="btn btn-primary">
            确定
          </button>
          <button type="button"
                  class="btn btn-secondary"
                  data-dismiss="modal">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <!--  点赞放这里-->
  <div th:replace="components/article/praise :: praise(${article})"></div>
  <script th:inline="javascript">
    // 删除文章
    let id = [[${article.articleId}]]
    $('#deleteBtn').click(function () {
      get("/article/api/delete?articleId=" + id, {}, function (data) {
        // 删除文章成功，跳转到首页
        window.location.href = "/";
      });
    });

    // 高亮代码
    hljs.addPlugin({
      'after:highlightElement': ({ el, result }) => {
        // move the language from the result into the dataset
        el.setAttribute('lang', result.language);
        el.classList.add('copyable');

        // 创建复制代码按钮
        const copyBtn = document.createElement('span');
        copyBtn.classList.add('copy-code-btn');
        copyBtn.textContent = '复制代码';

        // 将复制代码按钮添加到代码块后
        el.parentNode.insertBefore(copyBtn, el.nextSibling);
      }
    });
    hljs.highlightAll();

    const clipboard = new ClipboardJS('.copy-code-btn', {
      target: function(trigger) {
        return trigger.previousElementSibling;
      }
    });

    clipboard.on('success', function(e) {
      // 复制成功
      toastr.info("复制成功");
      e.clearSelection();
    });

    clipboard.on('error', function(e) {
      console.log('复制失败');
    });

    // 星球文章的权限控制
    console.log("实体内容:", [[${article}]])
    let loginRead = [[${other.readType}]];
    let user = [[${global.user}]];
    if (loginRead == 3) {
      console.log(loginRead, user)
      if (user == null) {
        // 未加入星球，展示弹窗
        $('#starModel').modal('show');
      } else {
        if (user.starStatus == "FORMAL") {

        } else if(user.starStatus == "TRYING"){

        } else {
          $('#starModel').modal('show');
        }
      }
    } else if (loginRead == 4) {
      // 对于付费阅读场景
      if (![[${article.canRead}]]) {
        if (user == null) {
          // 未登录时，弹出登录窗口
          $('#loginModal').modal('show')
        }
      }
    }


    // -------------------------------------- 下面是打赏支付、解锁全文的逻辑 -------------------------------------------

    function showPayUserInfo() {
      // 显示打赏用户信息
      $('#payUserModel').modal('show');
    }

    function redirctPayModal() {
      $('#payUserModel').modal('hide');
      showPayModal();
    }

    // 显示支付窗口
    let payId;
    function showPayModal() {
      $('#payModel').modal('show');
      autoShowPay();
    }

    function hasPaying() {
      let notes = getNotesInfo()
      // 标记为已经支付完成
      if (payId) {
        get("/article/api/pay/paying", {"payId": payId, "succeed": true, "notes": notes}, (res) => {
          toastr.info("支付结果的验证需要一点点时间，请耐心等候~");
          $('#payModel').modal('hide');
        })
      } else {
        // 没有支付id，重新创建一个
        get("/article/api/pay/toPay", {"articleId": id}, (res) => {
          payId = res.payId;
          get("/article/api/pay/paying", {"payId": res.payId, "succeed": true}, (res) => {
            toastr.info("支付结果的验证需要一点点时间，请耐心等候~");
            $('#payModel').modal('hide');
          })
        })
      }
    }

    function getNotesInfo() {
      let notesDiv = $('#mark')
      let notes;
      if (notesDiv) {
        notes = notesDiv.val()
      } else {
        notes = ''
      }
      return notes;
    }

  </script>
</section>
</html>
